<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>专注清单</title>
    <link rel="stylesheet" href="styles/main.css" />
    <link rel="stylesheet" href="styles/font-awesome/all.min.css" />
  </head>
  <body>
    <div class="app-container">
      <!-- 标题栏 -->
      <div class="title-bar">
        <div class="title-bar-left" id="titleBarLeft">
          <i class="fas fa-check-circle app-icon"></i>
          <span class="app-title">专注清单</span>
        </div>
        <div class="title-bar-right">
          <!-- 账号下拉菜单 -->
          <div class="account-dropdown">
            <div class="account-trigger" id="accountTrigger">
              <div class="account-avatar-small">
                <i class="fas fa-user"></i>
              </div>
              <span class="user-name">游客模式</span>
              <i class="fas fa-chevron-down dropdown-arrow"></i>
            </div>
            <div class="account-menu" id="accountMenu">
              <!-- 已登录状态的菜单 -->
              <div
                class="account-menu-logged-in"
                id="loggedInMenu"
                style="display: none"
              >
                <div class="account-menu-header">
                  <div class="account-avatar">
                    <i class="fas fa-user"></i>
                  </div>
                  <div class="account-info">
                    <div class="account-name">用户名</div>
                    <div class="account-email">用户邮箱</div>
                  </div>
                </div>
                <div class="account-menu-divider"></div>
                <div class="account-menu-items">
                  <div class="account-menu-item" data-action="sync">
                    <i class="fas fa-sync"></i>
                    <span>最后同步：刚刚</span>
                  </div>
                  <div class="account-menu-item" data-action="sync-now">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <span>立即同步</span>
                  </div>
                  <div class="account-menu-divider"></div>
                  <div class="account-menu-item" data-action="settings">
                    <i class="fas fa-cog"></i>
                    <span>账号设置</span>
                  </div>
                  <div class="account-menu-item" data-action="logout">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>退出登录</span>
                  </div>
                </div>
              </div>

              <!-- 游客状态的菜单 -->
              <div class="account-menu-guest" id="guestMenu">
                <div class="account-menu-header guest-header">
                  <div class="account-avatar guest-avatar">
                    <i class="fas fa-user-slash"></i>
                  </div>
                  <div class="account-info">
                    <div class="account-name">游客用户</div>
                    <div class="account-email">未登录状态</div>
                  </div>
                </div>
                <div class="account-menu-divider"></div>
                <div class="account-menu-items">
                  <div class="account-menu-item guest-limitation">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span>游客模式限制：最多3条任务</span>
                  </div>
                  <div class="account-menu-divider"></div>
                  <div class="account-menu-item" id="loginPromptHeader">
                    <i class="fas fa-sign-in-alt"></i>
                    <span>立即登录</span>
                  </div>
                  <div class="account-menu-item" data-action="registerNew">
                    <i class="fas fa-user-plus"></i>
                    <span>注册账号</span>
                  </div>
                  <div class="account-menu-divider"></div>
                  <div class="account-menu-item" data-action="settings">
                    <i class="fas fa-cog"></i>
                    <span>应用设置</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 窗口控制按钮 - 仅在非Mac系统显示 -->
          <div class="window-controls" id="windowControls" style="display: none;">
            <button class="control-btn minimize-btn">−</button>
            <button class="control-btn maximize-btn">□</button>
            <button class="control-btn close-btn">×</button>
          </div>
        </div>
      </div>

      <div class="main-content">
        <!-- 左侧导航栏 -->
        <div class="sidebar">
          <div class="nav-item active" data-category="today">
            <i class="fas fa-sun"></i>
            <span>今天</span>
            <span class="count">0</span>
          </div>
          <div class="nav-item" data-category="tomorrow">
            <i class="fas fa-calendar-day"></i>
            <span>明天</span>
            <span class="count">0</span>
          </div>
          <div class="nav-item" data-category="week">
            <i class="fas fa-calendar-week"></i>
            <span>本周</span>
            <span class="count">0</span>
          </div>
          <div class="nav-item" data-category="planned">
            <i class="fas fa-calendar-alt"></i>
            <span>已计划</span>
            <span class="count">0</span>
          </div>

          <!-- 优先级分类 -->
          <div class="nav-section priority-section" id="prioritySection">
            <div class="nav-section-title">
              <i class="fas fa-flag"></i>
              <span>优先级</span>
            </div>
            <div class="nav-item" data-category="high-priority">
              <i class="fas fa-flag" style="color: #ff4757"></i>
              <span>高优先级</span>
              <span class="count">0</span>
            </div>
            <div class="nav-item" data-category="medium-priority">
              <i class="fas fa-flag" style="color: #ffa502"></i>
              <span>中优先级</span>
              <span class="count">0</span>
            </div>
            <div class="nav-item" data-category="low-priority">
              <i class="fas fa-flag" style="color: #2ed573"></i>
              <span>低优先级</span>
              <span class="count">0</span>
            </div>
          </div>

          <div class="nav-item" data-category="completed">
            <i class="fas fa-check"></i>
            <span>已完成</span>
            <span class="count">0</span>
          </div>
          <div class="nav-item" data-category="tasks">
            <i class="fas fa-tasks"></i>
            <span>任务</span>
            <span class="count">0</span>
          </div>

          <div class="create-list-btn">
            <i class="fas fa-plus"></i>
            <span>创建清单</span>
          </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="content-area">
          <div class="content-header">
            <h1 class="page-title">今天</h1>
            <div class="view-toggle">
              <button class="toggle-btn active">列表</button>
              <button class="toggle-btn">看板</button>
            </div>
          </div>

          <!-- 统计卡片 -->
          <div class="stats-container">
            <div class="stat-card">
              <div class="stat-number red">0</div>
              <div class="stat-label">分钟</div>
              <div class="stat-desc">预计时间</div>
            </div>
            <div class="stat-card">
              <div class="stat-number red">0</div>
              <div class="stat-label"></div>
              <div class="stat-desc">待完成任务</div>
            </div>
            <div class="stat-card">
              <div class="stat-number red">0</div>
              <div class="stat-label">分钟</div>
              <div class="stat-desc">已完成时间</div>
            </div>
            <div class="stat-card">
              <div class="stat-number red">0</div>
              <div class="stat-label"></div>
              <div class="stat-desc">已完成任务</div>
            </div>
          </div>

          <!-- 任务添加区域 -->
          <div class="add-task-container">
            <div class="add-task-input">
              <i class="fas fa-plus"></i>
              <input
                type="text"
                placeholder='在"任务"中添加一个任务，按 [回车] 键保存'
                id="taskInput"
              />
              <div class="pomodoro-selector">
                <button
                  class="pomodoro-btn"
                  id="pomodoroBtn"
                  title="设置番茄时间"
                >
                  <i class="fas fa-clock"></i>
                  <span id="pomodoroCount">不设置</span>
                </button>
                <div class="pomodoro-dropdown" id="pomodoroDropdown">
                  <div class="pomodoro-option" data-count="0">
                    不设置番茄时间
                  </div>
                  <div class="pomodoro-option" data-count="1">
                    1个番茄 (25分钟)
                  </div>
                  <div class="pomodoro-option" data-count="2">
                    2个番茄 (50分钟)
                  </div>
                  <div class="pomodoro-option" data-count="3">
                    3个番茄 (75分钟)
                  </div>
                  <div class="pomodoro-option" data-count="4">
                    4个番茄 (100分钟)
                  </div>
                  <div class="pomodoro-option" data-count="6">
                    6个番茄 (150分钟)
                  </div>
                  <div class="pomodoro-option" data-count="8">
                    8个番茄 (200分钟)
                  </div>
                  <div class="pomodoro-custom">
                    <input
                      type="number"
                      id="customPomodoro"
                      min="1"
                      max="20"
                      placeholder="自定义"
                    />
                    <span>个番茄</span>
                  </div>
                </div>
              </div>
              <div class="due-date-selector">
                <button
                  class="due-date-btn"
                  id="dueDateBtn"
                  title="设置到期时间"
                >
                  <i class="fas fa-calendar"></i>
                  <span id="dueDateText">到期时间</span>
                </button>
                <div class="due-date-dropdown" id="dueDateDropdown">
                  <div class="due-date-quick-options">
                    <div class="due-date-option" data-days="0">今天</div>
                    <div class="due-date-option" data-days="1">明天</div>
                    <div class="due-date-option" data-days="7">下周</div>
                  </div>
                  <div class="due-date-custom">
                    <input type="date" id="customDueDate" />
                    <button class="clear-due-date" id="clearDueDate">
                      清除
                    </button>
                  </div>
                </div>
              </div>
              <div class="task-actions">
                <button class="action-btn"><i class="fas fa-bell"></i></button>
                <button class="action-btn">
                  <i class="fas fa-repeat"></i>
                </button>
                <button class="action-btn"><i class="fas fa-tag"></i></button>
                <button class="action-btn">
                  <i class="fas fa-paperclip"></i>
                </button>
                <button class="action-btn">
                  <i class="fas fa-comment"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 任务列表 -->
          <div class="tasks-container" id="tasksList">
            <div class="empty-state">
              <div class="empty-icon">
                <i class="fas fa-clipboard-list"></i>
              </div>
              <div class="empty-title">无任务</div>
              <div class="empty-desc">点击上方输入框添加新的任务</div>
              <div class="empty-dropdown">
                <select>
                  <option>显示已完成任务</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 番茄钟 -->
      <div class="pomodoro-timer" id="pomodoroTimer">
        
        <!-- 计时器主体 -->
        <div class="timer-container">
          <div class="timer-header">
            <div class="timer-status">
              <i class="fas fa-clock timer-icon"></i>
              <span class="timer-label">番茄钟</span>
            </div>
            <div class="timer-mode-controls">
              <div class="timer-mode">
                <span class="mode-indicator" id="modeIndicator">自由计时</span>
              </div>
              <!-- 计时器头部控制栏 -->
              <div class="timer-header-controls">
                <button class="timer-minimize-btn" id="timerMinimizeBtn" title="最小化">
                  <i class="fas fa-minus"></i>
                </button>
                <button class="timer-maximize-btn" id="timerMaximizeBtn" title="最大化">
                  <i class="fas fa-expand"></i>
                </button>
              </div>
            </div>
          </div>
          
          <!-- 自由计时时长选择 -->
          <div class="timer-duration-selector" id="durationSelector">
            <button class="duration-btn" data-minutes="25">25分钟</button>
            <button class="duration-btn active" data-minutes="50">50分钟</button>
            <button class="duration-btn" data-minutes="75">75分钟</button>
            <button class="duration-btn" data-minutes="100">100分钟</button>
          </div>
          
          <div class="timer-display">
            <span class="timer-time" id="timerDisplay">25:00</span>
            <div class="timer-controls">
              <button class="timer-play-btn" id="timerBtn">
                <i class="fas fa-play"></i>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 任务信息区域（仅在关联任务时显示） -->
        <div class="task-info-container" id="taskInfoContainer" style="display: none;">
          <div class="task-header">
            <i class="fas fa-tasks"></i>
            <span class="task-label">当前任务</span>
          </div>
          <div class="task-content">
            <span class="task-name" id="taskName"></span>
            <div class="task-controls">
              <button class="stop-task-btn" id="stopTaskBtn" title="停止任务计时">
                <i class="fas fa-stop"></i>
                <span>停止</span>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 白噪音控制面板（仅在最大化时显示） -->
        <div class="white-noise-panel" id="whiteNoisePanel" style="display: none;">
          <div class="noise-header">
            <i class="fas fa-volume-up"></i>
            <span class="noise-label">白噪音</span>
            <button class="noise-stop-all-btn" id="noiseStopAllBtn" title="停止所有">
              <i class="fas fa-stop"></i>
            </button>
          </div>
          <div class="noise-controls" id="noiseControls">
            <!-- 白噪音控制项将通过JS动态生成 -->
          </div>
        </div>
      </div>
    </div>

    <!-- 自定义确认删除弹窗 -->
    <div id="deleteConfirmModal" class="confirm-modal">
      <div class="confirm-dialog">
        <div class="confirm-header">
          <div class="confirm-icon">
            <i class="fas fa-exclamation-triangle"></i>
          </div>
          <h3 class="confirm-title">确认删除</h3>
        </div>
        <div class="confirm-message">
          确定要删除以下任务吗？删除后无法恢复。
          <div id="confirmTaskName" class="confirm-task-name"></div>

        </div>
        <div class="confirm-actions">
          <button id="confirmCancel" class="confirm-btn confirm-btn-cancel">
            <i class="fas fa-times"></i> 取消
          </button>
          <button id="confirmDelete" class="confirm-btn confirm-btn-delete">
            <i class="fas fa-trash"></i> 删除
          </button>
        </div>
      </div>
    </div>

    <!-- 任务详情编辑弹窗 -->
    <div id="taskDetailModal" class="task-detail-modal">
      <div class="task-detail-dialog">
        <div class="task-detail-header">
          <h3 class="task-detail-title">任务详情</h3>
          <button id="taskDetailClose" class="task-detail-close">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="task-detail-content">
          <div class="task-detail-field">
            <label for="taskDetailText">任务内容</label>
            <input
              type="text"
              id="taskDetailText"
              class="task-detail-input"
              placeholder="输入任务内容"
            />
          </div>
          <div class="task-detail-field">
            <label for="taskDetailPriority">优先级</label>
            <select id="taskDetailPriority" class="task-detail-select">
              <option value="high">🔴 高优先级</option>
              <option value="medium" selected>🟡 中优先级</option>
              <option value="low">🟢 低优先级</option>
            </select>
          </div>
          <div class="task-detail-field">
            <label for="taskDetailPomodoros">番茄数量</label>
            <select id="taskDetailPomodoros" class="task-detail-select">
              <option value="0">不设置番茄时间</option>
              <option value="1">1个番茄 (25分钟)</option>
              <option value="2">2个番茄 (50分钟)</option>
              <option value="3">3个番茄 (75分钟)</option>
              <option value="4">4个番茄 (100分钟)</option>
              <option value="5">5个番茄 (125分钟)</option>
              <option value="6">6个番茄 (150分钟)</option>
              <option value="8">8个番茄 (200分钟)</option>
            </select>
          </div>
          <div class="task-detail-field">
            <label for="taskDetailDueDate">到期时间</label>
            <input
              type="date"
              id="taskDetailDueDate"
              class="task-detail-input"
            />
          </div>
          <div class="task-detail-field">
            <label>创建时间</label>
            <div id="taskDetailCreatedAt" class="task-detail-readonly"></div>
          </div>
          <div
            class="task-detail-field"
            id="taskDetailCompletedField"
            style="display: none"
          >
            <label>完成时间</label>
            <div id="taskDetailCompletedAt" class="task-detail-readonly"></div>
          </div>
        </div>
        <div class="task-detail-actions">
          <button
            id="taskDetailCancel"
            class="task-detail-btn task-detail-btn-cancel"
          >
            <i class="fas fa-times"></i> 取消
          </button>
          <button
            id="taskDetailSave"
            class="task-detail-btn task-detail-btn-save"
          >
            <i class="fas fa-save"></i> 保存
          </button>
        </div>
      </div>
    </div>

    <!-- 设置弹窗 -->
    <div id="settingsModal" class="settings-modal">
      <div class="settings-dialog">
        <div class="settings-header">
          <h3 class="settings-title">设置</h3>
          <button id="settingsClose" class="settings-close">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="settings-content">
          <div class="settings-sidebar">
            <div class="settings-nav-item active" data-tab="general">
              <i class="fas fa-sliders-h"></i>
              <span>通用</span>
            </div>
            <div class="settings-nav-item" data-tab="ringtones">
              <i class="fas fa-music"></i>
              <span>通知铃声</span>
            </div>
            <div class="settings-nav-item" data-tab="about">
              <i class="fas fa-info-circle"></i>
              <span>关于</span>
            </div>
          </div>
          <div class="settings-main">
            <div class="settings-tab-content active" id="general-tab">
              <h4>清单管理</h4>
              <div class="settings-group">
                <!-- 基础导航项 -->
                <div class="setting-item">
                  <div class="setting-info">
                    <span class="setting-label">今天</span>
                  </div>
                  <label class="toggle-switch">
                    <input type="checkbox" id="todayTasks" checked />
                    <span class="slider"></span>
                  </label>
                </div>
                <div class="setting-item">
                  <div class="setting-info">
                    <span class="setting-label">明天</span>
                  </div>
                  <label class="toggle-switch">
                    <input type="checkbox" id="tomorrowTasks" checked />
                    <span class="slider"></span>
                  </label>
                </div>
                <div class="setting-item">
                  <div class="setting-info">
                    <span class="setting-label">本周</span>
                  </div>
                  <label class="toggle-switch">
                    <input type="checkbox" id="weekTasks" checked />
                    <span class="slider"></span>
                  </label>
                </div>
                <div class="setting-item">
                  <div class="setting-info">
                    <span class="setting-label">已计划</span>
                  </div>
                  <label class="toggle-switch">
                    <input type="checkbox" id="plannedTasks" checked />
                    <span class="slider"></span>
                  </label>
                </div>

                <!-- 优先级分组 -->
                <div class="setting-section">
                  <h5>优先级分类</h5>
                  <div class="setting-item">
                    <div class="setting-info">
                      <span class="setting-label">显示优先级分组</span>
                      <span class="setting-desc"
                        >在左侧菜单中显示优先级分类</span
                      >
                    </div>
                    <label class="toggle-switch">
                      <input type="checkbox" id="showPrioritySection" checked />
                      <span class="slider"></span>
                    </label>
                  </div>
                  <div class="setting-item">
                    <div class="setting-info">
                      <span class="setting-label">高优先级</span>
                    </div>
                    <label class="toggle-switch">
                      <input type="checkbox" id="highPriorityTasks" checked />
                      <span class="slider"></span>
                    </label>
                  </div>
                  <div class="setting-item">
                    <div class="setting-info">
                      <span class="setting-label">中优先级</span>
                    </div>
                    <label class="toggle-switch">
                      <input type="checkbox" id="mediumPriorityTasks" checked />
                      <span class="slider"></span>
                    </label>
                  </div>
                  <div class="setting-item">
                    <div class="setting-info">
                      <span class="setting-label">低优先级</span>
                    </div>
                    <label class="toggle-switch">
                      <input type="checkbox" id="lowPriorityTasks" checked />
                      <span class="slider"></span>
                    </label>
                  </div>
                </div>

                <!-- 其他导航项 -->
                <div class="setting-item">
                  <div class="setting-info">
                    <span class="setting-label">已完成</span>
                  </div>
                  <label class="toggle-switch">
                    <input type="checkbox" id="completedTasks" checked />
                    <span class="slider"></span>
                  </label>
                </div>
                <div class="setting-item">
                  <div class="setting-info">
                    <span class="setting-label">任务</span>
                  </div>
                  <label class="toggle-switch">
                    <input type="checkbox" id="allTasks" checked />
                    <span class="slider"></span>
                  </label>
                </div>
              </div>
            </div>
            <div class="settings-tab-content" id="ringtones-tab">
              <h4>铃声设置</h4>
              <div class="settings-group">
                <div class="setting-item">
                  <span class="setting-label">提醒铃声</span>
                  <select class="setting-select" id="ringtoneSelect">
                    <option value="default">默认提示音</option>
                    <option value="bell">清脆铃声</option>
                    <option value="notification">通知音</option>
                    <option value="ding">简约叮声</option>
                    <option value="doorbell">门铃声</option>
                    <option value="electronic">电子门铃</option>
                  </select>
                </div>
                <div class="setting-item">
                  <button class="test-ringtone-btn" id="testRingtoneBtn">
                    <i class="fas fa-play"></i>
                    试听铃声
                  </button>
                </div>
              </div>
            </div>
            <div class="settings-tab-content" id="about-tab">
              <h4>关于专注清单</h4>
              <div class="settings-group">
                <div class="setting-item">
                  <span class="setting-label">版本</span>
                  <span class="setting-value">1.0.0</span>
                </div>
                <div class="setting-item">
                  <span class="setting-label">开发者</span>
                  <span class="setting-value">ynaa.net</span>
                </div>
                <div class="setting-item">
                  <span class="setting-label">技术栈</span>
                  <span class="setting-value">Electron 27.0.0</span>
                </div>
                <div class="setting-item">
                  <span class="setting-label">许可证</span>
                  <span class="setting-value">AGPL-3.0</span>
                </div>
              </div>

              <h4>功能特性</h4>
              <div class="settings-group">
                <div class="feature-list">
                  <div class="feature-item">
                    <i class="fas fa-tasks"></i>
                    <div class="feature-content">
                      <strong>智能任务管理</strong>
                      <p>支持任务分类、优先级设置和进度跟踪</p>
                    </div>
                  </div>
                  <div class="feature-item">
                    <i class="fas fa-clock"></i>
                    <div class="feature-content">
                      <strong>番茄钟功能</strong>
                      <p>25分钟专注时间，短休息和长休息提醒</p>
                    </div>
                  </div>
                  <div class="feature-item">
                    <i class="fas fa-palette"></i>
                    <div class="feature-content">
                      <strong>现代化界面</strong>
                      <p>简洁美观的用户界面，响应式布局设计</p>
                    </div>
                  </div>
                </div>
              </div>

              <h4>关于 ynaa.net</h4>
              <div class="settings-group">
                <div class="about-ynaa" style="padding: 15px">
                  <p>
                    <strong>ynaa</strong> 代表 "<strong>Y</strong>our
                    <strong>N</strong>ext <strong>A</strong>wesome
                    <strong>A</strong>pplication"
                  </p>
                  <p>致力于为用户提供优质的开源应用程序</p>
                  <div class="ynaa-links">
                    <a id="websiteLink" href="#" class="ynaa-link">
                      <i class="fas fa-globe"></i>
                      访问官网
                    </a>
                    <a id="githubLink" href="#" class="ynaa-link">
                      <i class="fab fa-github"></i>
                      Gitee
                    </a>
                  </div>
                </div>
              </div>

              <div class="settings-group">
                <div class="app-motto">
                  <i class="fas fa-quote-left"></i>
                  <span>专注清单 - 让每一分钟都更有价值</span>
                  <i class="fas fa-quote-right"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 在设置模态框后添加登录模态框 -->
    <!-- 登录模态框 -->
    <div class="login-modal" id="loginModal">
      <div class="login-dialog">
        <div class="login-header">
          <h3 class="login-title">登录专注清单</h3>
          <button class="login-close" id="loginClose">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="login-content">
          <!-- 登录方式切换 -->
          <div class="login-tabs">
            <button class="login-tab active" data-tab="password">
              密码登录
            </button>
            <button class="login-tab" data-tab="sms">验证码登录</button>
          </div>

          <!-- 密码登录表单 -->
          <div class="login-form" id="passwordForm">
            <div class="login-field">
              <label>用户名/手机号</label>
              <input
                type="text"
                id="username"
                placeholder="请输入用户名/手机号"
                required
              />
            </div>
            <div class="login-field">
              <label>密码</label>
              <input
                type="password"
                id="password"
                placeholder="请输入密码"
                required
              />
            </div>
            <div class="login-options">
              <label class="remember-me">
                <input type="checkbox" id="rememberMe" checked/>
                <span>记住我</span>
              </label>
              <a href="#" class="forgot-password">忘记密码？</a>
            </div>
            <button class="login-btn" id="passwordLoginBtn">登录</button>
          </div>

          <!-- 验证码登录表单 -->
          <div class="login-form hidden" id="smsForm">
            <div class="login-field">
              <label>手机号</label>
              <input
                type="tel"
                id="phoneNumber"
                placeholder="请输入手机号"
                required
              />
            </div>
            <div class="login-field">
              <label>验证码</label>
              <div class="sms-input-group">
                <input
                  type="text"
                  id="smsCode"
                  placeholder="请输入验证码"
                  required
                />
                <button class="sms-btn" id="sendSmsBtn">发送验证码</button>
              </div>
            </div>
            <button class="login-btn" id="smsLoginBtn">登录</button>
          </div>

          <!-- 注册新用户 -->
          <div class="register-section">
            <div class="register-divider">
              <span>还没有账号？</span>
            </div>
            <button class="register-btn" id="registerBtn">
              <i class="fas fa-user-plus"></i>
              注册新用户
            </button>
          </div>

          <!-- 游客模式提示 -->
          <div class="guest-mode">
            <div class="guest-info">
              <i class="fas fa-info-circle"></i>
              <span>不登录也可以使用，但最多只能创建3条任务</span>
            </div>
            <button class="guest-btn" id="guestModeBtn">
              继续使用游客模式
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 任务限制提示 -->
    <div class="task-limit-notice" id="taskLimitNotice">
      <div class="notice-content">
        <i class="fas fa-exclamation-triangle"></i>
        <span
          >游客模式最多只能创建3条任务，<a href="#" id="loginPrompt">立即登录</a
          >解锁更多功能</span
        >
        <button class="notice-close" id="noticeDismiss">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>

    <!-- 美化提示组件 -->
    <div class="toast-container" id="toastContainer"></div>

    <!-- 美化确认对话框 -->
    <div class="alert-modal" id="alertModal">
      <div class="alert-dialog">
        <div class="alert-header">
          <div class="alert-icon" id="alertIcon">
            <i class="fas fa-info-circle"></i>
          </div>
          <h3 class="alert-title" id="alertTitle">提示</h3>
        </div>
        <div class="alert-content">
          <p class="alert-message" id="alertMessage"></p>
        </div>
        <div class="alert-actions">
          <button class="alert-btn alert-btn-primary" id="alertConfirmBtn">
            确定
          </button>
        </div>
      </div>
    </div>

    <!-- 确认对话框 -->
    <div class="confirm-modal" id="confirmModal">
      <div class="confirm-dialog">
        <div class="confirm-header">
          <div class="confirm-icon" id="confirmIcon">
            <i class="fas fa-question-circle"></i>
          </div>
          <h3 class="confirm-title" id="confirmTitle">确认操作</h3>
        </div>
        <div class="confirm-content">
          <p class="confirm-message" id="confirmMessage"></p>
        </div>
        <div class="confirm-actions">
          <button class="confirm-btn confirm-btn-cancel" id="confirmCancelBtn">
            取消
          </button>
          <button
            class="confirm-btn confirm-btn-confirm"
            id="confirmConfirmBtn"
          >
            确定
          </button>
        </div>
      </div>
    </div>

    <script src="js/NotificationManager.js"></script>
    <script src="js/AuthManager.js"></script>
    <script src="js/TaskManager.js"></script>
    <script src="js/PomodoroTimer.js"></script>
    <script src="js/UIRenderer.js"></script>
    <script src="js/InputController.js"></script>
    <!-- 添加缺失的管理器文件 -->
    <script src="js/EventManager.js"></script>
    <script src="js/ModalManager.js"></script>
    <script src="js/SettingsManager.js"></script>
    <script src="js/AccountDropdownManager.js"></script>
    <script src="js/WhiteNoiseManager.js"></script>
    <script src="js/SyncManager.js"></script>
    <!-- app.js 必须最后加载 -->
    <script src="js/app.js"></script>
  </body>
</html>
